<template>
  <div class="mui-content mh-container pd">
    <mh-header headName="匹配流程"> </mh-header>

    <div class="detail-head bg-w">
      <div class="header-wrap mh-pd">
        <h4>基本资料</h4>
        <div class="header-inner flex-bt">
          <div class="head-lt flex">
            <div class="inner-lt">
              <div class="pic-box">
                <img :src="matchInfo.pic" alt="头像">
              </div>
            </div>
            <div class="inner-rt">
              <p>
                <span class="txt-bold">{{matchInfo.name}}</span>
                <span>{{matchInfo.sex}}|{{matchInfo.age}}岁|{{matchInfo.city}}</span>
              </p>
              <p>宝马|90平米|工程师|苗条|8k </p>
            </div>
          </div>
          <div class="head-rt">
            <p>老家：上海 大学本科</p>
            <p>B+</p>
          </div>
        </div>
        <div class="btn-row flex-bt">
          <button type="button" class="mh-btn match-btn">人工匹配</button>
          <button type="button" class="mh-btn match-btn">请求系统计算匹配</button>
        </div>
      </div>

    </div>

    <div class="match-outer bg-w">
      <div class="match-item mh-pd">
        <h4 class="match-header">匹配结果</h4>
        <ul class="match-list flex">
          <li class="match-list-item with-radio flex" v-for="item in tobeMatched" :key="item.id">
            <div class="list-lt">
              <div class="pic-box">
                <img :src="item.pic" alt="">
              </div>
            </div>
            <div class="list-rt">
              <p>
                <span class="txt-bold">用户名</span>
                <span>女|23岁|上海</span>
              </p>
              <p class="txt-time">下单2018.04.02 16:20</p>
              <p class="txt-time">结单2018.04.02 16:20</p>
            </div>
          </li>
        </ul>

        <div class="btn-row mui-text-center">
          <button type="button" class="mh-btn match-btn">选中并发送</button>
        </div>

      </div>

      <div class="match-item mh-pd">
        <h4 class="match-header">被选中的</h4>
        <ul class="match-list flex">
          <li class="match-list-item flex" v-for="item in tobeMatched" :key="item.id">
            <div class="list-lt">
              <div class="pic-box">
                <img :src="item.pic" alt="">
              </div>
            </div>
            <div class="list-rt">
              <p>
                <span class="txt-bold">用户名</span>
                <span>女|23岁|上海</span>
              </p>
              <p class="txt-time">下单2018.04.02 16:20</p>
              <p class="txt-time">结单2018.04.02 16:20</p>
            </div>
          </li>
        </ul>

      </div>

      <div class="match-item mh-pd">
        <h4 class="match-header">被选中的确认的</h4>
        <ul class="match-list flex">
          <li class="match-list-item flex" v-for="item in tobeMatched" :key="item.id">
            <div class="list-lt">
              <div class="pic-box">
                <img :src="item.pic" alt="">
              </div>
            </div>
            <div class="list-rt">
              <p>
                <span class="txt-bold">用户名</span>
                <span>女|23岁|上海</span>
              </p>
              <p class="txt-time">下单2018.04.02 16:20</p>
              <p class="txt-time">结单2018.04.02 16:20</p>
            </div>
          </li>
        </ul>

      </div>

      <div class="match-item mh-pd">
        <h4 class="match-header">被选中的下后付费订单的</h4>
        <ul class="match-list flex">
          <li class="match-list-item flex" v-for="item in tobeMatched" :key="item.id">
            <div class="list-lt">
              <div class="pic-box">
                <img :src="item.pic" alt="">
              </div>
            </div>
            <div class="list-rt">
              <p>
                <span class="txt-bold">用户名</span>
                <span>女|23岁|上海</span>
              </p>
              <p class="txt-time">下单2018.04.02 16:20</p>
              <p class="txt-time">结单2018.04.02 16:20</p>
            </div>
          </li>
        </ul>

      </div>

      <div class="match-item mh-pd">
        <h4 class="match-header">确认约会的</h4>
        <ul class="match-list flex">
          <li class="match-list-item flex" v-for="item in tobeMatched" :key="item.id">
            <div class="list-lt">
              <div class="pic-box">
                <img :src="item.pic" alt="">
              </div>
            </div>
            <div class="list-rt">
              <p>
                <span class="txt-bold">用户名</span>
                <span>女|23岁|上海</span>
              </p>
              <p class="txt-time">下单2018.04.02 16:20</p>
              <p class="txt-time">结单2018.04.02 16:20</p>
            </div>
          </li>
        </ul>

      </div>

      <div class="match-item mh-pd">
        <h4 class="match-header">确认恋爱的</h4>
        <ul class="match-list flex">
          <li class="match-list-item flex" v-for="item in tobeMatched" :key="item.id">
            <div class="list-lt">
              <div class="pic-box">
                <img :src="item.pic" alt="">
              </div>
            </div>
            <div class="list-rt">
              <p>
                <span class="txt-bold">用户名</span>
                <span>女|23岁|上海</span>
              </p>
              <p class="txt-time">下单2018.04.02 16:20</p>
              <p class="txt-time">结单2018.04.02 16:20</p>
            </div>
          </li>
        </ul>

      </div>

      <div class="match-item mh-pd">
        <h4 class="match-header">恋爱中的</h4>
        <ul class="match-list flex">
          <li class="match-list-item flex" v-for="item in tobeMatched" :key="item.id">
            <div class="list-lt">
              <div class="pic-box">
                <img :src="item.pic" alt="">
              </div>
            </div>
            <div class="list-rt">
              <p>
                <span class="txt-bold">用户名</span>
                <span>女|23岁|上海</span>
              </p>
              <p class="txt-time">下单2018.04.02 16:20</p>
              <p class="txt-time">结单2018.04.02 16:20</p>
            </div>
          </li>
        </ul>

      </div>
    </div>

  </div>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header'
  export default {
    data () {
      return {
        matchInfo: {
          name: '用户甲',
          pic: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=766585699,506578438&fm=26&gp=0.jpg',
          sex: '女',
          age: 23,
          city: '上海长宁',
          car: '宝马',
          house: '90平米',
          career: '工程师',
          bodyType: '苗条',
          income: '8k',
          hometown: '上海',
          edu: '大学本科',
          level: 'B+'
        },
        tobeMatched: [
          {
            id: '1',
            name: '章叁',
            pic: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=766585699,506578438&fm=26&gp=0.jpg',
            sex: 1,
            age: 23,
            city: '上海',
            placeTime: '2018-09-21 14:45',
            statementTime: '2018-09-21 14:45',
          },
          {
            id: '2',
            name: '章叁',
            pic: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=766585699,506578438&fm=26&gp=0.jpg',
            sex: 1,
            age: 23,
            city: '上海',
            placeTime: '2018-09-21 14:45',
            statementTime: '2018-09-21 14:45',
          },
          {
            id: '3',
            name: '章叁',
            pic: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=766585699,506578438&fm=26&gp=0.jpg',
            sex: 1,
            age: 23,
            city: '上海',
            placeTime: '2018-09-21 14:45',
            statementTime: '2018-09-21 14:45',
          }
        ]
      }
    },
    methods: {
      handleCondition (i) {

      }
    },
    components: {
      MhHeader
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  @import "../../assets/css/mixin";
  .pic-box {
    @include mh-avatar-box(3.1rem, 3.1rem)
  }
  .header-wrap {
    h4 {
      margin: 1rem 0;
      font-weight: bold;
      @include sc(1.4rem, #333);
    }
  }
  .txt-bold {@include sc(1.3rem, #333);}
  .detail-head {
    border-bottom: .05rem solid #eeeeee;
  }
  .mui-control-item span {
    font-size: 1.4rem;
  }
  .match-header {
    @include sc(1.2rem, #333);
    margin: 1.2rem 0;
    font-weight: bold;
  }
  .match-item {padding-bottom: .1rem;}
  .match-list {
    flex-wrap: wrap;
    .match-list-item {
      width: 50%;
      margin-bottom: .4rem;
      padding-right: .2rem;
      align-items: flex-start;
    }
  }
  .list-lt {margin-right: .2rem;}
  .pic-box {@include mh-avatar-box(3.1rem, 3.1rem)}
  .txt-bold {@include sc(1.3rem, #333);}
  .txt-time {@include sc(1.2rem, #666);}
  .btn-row {padding: 0 1rem;}
  .match-btn {
    width: 12.6rem;
    margin-top: .8rem;
    padding: .8rem;
    border-radius: 1.5rem;
  }
  .with-radio {
    background: url("../../assets/images/ico/ic_vo_uncheck.png") no-repeat right center;
    background-size: 1.8rem 1.85rem;
  }
</style>
